<template>
  <div class="JADP-common-layout">
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-input
                v-model="testpapername"
                placeholder="请选择"
                readonly
                @click.native.stop="$refs.paperTable.visible = true"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="$refs.paperTable.visible = true"
                  >搜索</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级名称">
              <el-input
                v-model="classname"
                placeholder="请先选择试卷在选择班级"
                readonly
                v-popover:popover
                @click.native.stop="choiceClazz"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="choiceClazz"
                  >搜索</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="initData()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <el-popover
        ref="popover"
        placement="top-start"
        width="250"
        trigger="hover"
        :content="classname"
      >
      </el-popover>
      <div class="JADP-common-layout-main JADP-flex-main">
        <div
          id="ScoreStatistics"
          style="width: 100%; height: 100%; margin-top:20px"
        ></div>
      </div>
    </div>
    <PaperTable ref="paperTable" @currentRow="currentRow" />
    <ClazzTable1
      ref="clazzTable1"
      @multipleSelection="multipleSelection"
      :paperid="query.paperid"
    />
  </div>
</template>
<script>
import echarts from "echarts";
import request from "@/utils/request";
import PaperTable from "../components/paperTable.vue";
import ClazzTable1 from "../components/clazzTable1.vue";
export default {
  name: "ScoreStatistics",
  components: {
    PaperTable,
    ClazzTable1
  },
  data() {
    return {
      query: {
        paperid: "",
        clazzid: "",
        organizeId:""

      },
      testpapername: "",
      classname: ""
    };
  },
  methods: {
    currentRow(val) {
      this.query.paperid = val.id;
      this.testpapername = val.testpapername;
    },
    multipleSelection(val) {
      this.query.clazzid = val.map(item => item.id).join();
      this.classname = val.map(item => item.classname).join();
    },
    initChart(XData, series) {
      let option = {
        title: {
          text: "成绩分析统计",
          textStyle: {
            color: "#3e3e3e"
          },
          x: "center",
          y: "top",
          textAlign: "center"
        },

        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: "10%",
          left: "3%",
          right: "3%",
          bottom: "10%",
          containLabel: true
        },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "2%",
          padding: [20, 0, 30, 0],
          //图例文字样式
          textStyle: {
            color: "#8c88a1",
            fontSize: "1rem"
          }
        },
        xAxis: [
          {
            type: "category",
            data: XData,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: series
      };
      this.chart = echarts.init(document.getElementById("ScoreStatistics"));
      this.chart.setOption(option);
      window.onresize = this.chart.resize();
    },
    initData() {
      if (!(this.query.paperid && this.query.clazzid)) {
        return this.$message.warning("请先选择试卷和班级");
      }
      this.query.organizeId= this.$store.getters.organizeId

      request({
        url: "/api/statistics/StatisticsController/scoreStatistics",
        method: "get",
        data: this.query
      }).then(res => {
        let dataList = res.data.dataList;
        let totalScore = res.data.totalScore;
        let tscore = Math.ceil(totalScore / 10) * 10; // 向上取整

        let XData = [];
        // 计算出分数段（x轴）的数组
        for (let index = 0; index < tscore / 10; index++) {
          XData.push(`${index * 10}-${(index + 1) * 10}`);
        }

        let series = [];
        for (let key in dataList) {
          let YData = [];
          //根据X轴的数组计算出数据的个数（默认为0）
          for (let i = 0; i < XData.length; i++) {
            YData[i] = 0;
          }
          dataList[key].forEach(value => {
            YData.forEach((item, index) => {
              let front = XData[index].match(/(\S*)-/)[1]; // 截取"-"前的内容
              let after = XData[index].match(/-(\S*)/)[1]; // 截取"-"后的内容
              // 判断学员的分数是否在front - after的分数段内，如果在则对应的数据+1
              if (value.stuscore > front * 1 && value.stuscore <= after * 1) {
                YData[index] += 1;
              }
            });
          });
          series.push({
            name: key,
            type: "bar",
            data: YData
          });
        }
        console.log(series, "series");
        this.initChart(XData, series);
      });
    },
    choiceClazz() {
      this.$refs.clazzTable1.initData();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
        this.testpapername = "";
        this.classname = "";
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
